import { defineStore } from "pinia";
import { reactive, ref } from "vue";
import axios from 'axios';
import { nanoid } from 'nanoid'
import LoveTalk from "@/components/LoveTalk.vue";


export const useLoveTalkStore = defineStore('lovetalk', () => {
    /* 
        state(){
            return {talkList:JSON.parse(localStorage.getItem('talkList') as string) || []}
        }
            
        let talkLists = ref(JSON.parse(localStorage.getItem('talk') as string) || [])
            
        选项式数据:XXXXX变量名:数据
        组合式数据:如同JS写法
                    :let XXX= XXX 要让其变成响应式要+ref()/reactive()
        
            [{},{},{}]
            选项式的写法
    
            数据是:talkList:他的数据是一个[{},{},{}]的一个本地存储属性......
            
            如果我们要使用组合式API的写法,来写的话,那我们要达到一样的效果
            则要这样子写
            let talkLists = ref(JSON.parse(localStorage.getItem('talk') as string) || [])
            [{},{},{}]
            在注入中我们也是对我们的talckList.value值进行注入
            talckList.value = 数组
            然后,我们使用数组unshift方法向我们数组的最后注入一个我们的一个{数据...}

    */

    let talkLists = ref(
        JSON.parse(localStorage.getItem('talk') as string) || []
    )

    async function addloveTalk() {
        /* 
            直接进行结构赋值....把发过来的内容内的data对象内的content属性解构出阿里
        */
        let { data: { content } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        let obj = { id: nanoid(), title: content }
        talkLists.value.unshift(obj)
        console.log(talkLists);

    }

    /* 
       添加存储,我们从aixos中获取的图片
    */

    return { addloveTalk, talkLists }
})